<template>
<div>
  <Button type="primary" style="margin-bottom: 20px" @click="transferModal = true">发起迁移</Button>
  <template>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row }" slot="transfer_type">
        <span v-show="row.transfer_type === '0'">网格</span>
        <span v-show="row.transfer_type === '1'">楼</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="clickDetail(row)">详情</Button>
        <Button v-if="severUserInfo.company_grade === '2' && row.examine_type === '0'"  type="success" size="small" @click="updateTransferExamineType(row)">同意</Button>
      </template>
    </Table>
  </template>
  <template>
    <div style="text-align: right;margin-top: 20px">
      <Page :total="params.totalRecord" show-sizer @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </div>
  </template>
  <Modal
    width="1200"
    v-model="transferModal"
    @on-ok="transferConfirm"
    title="网格迁移">
    <Form :model="formItem" :label-width="200">
      <Row>
        <Col span="24">
          <FormItem label="选择迁移主体类型">
            <Select v-model="formItem.transfer_type" style="width:300px">
              <Option value="0">网格</Option>
              <Option value="1">楼</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="当前区">
            <Select v-model="formItem.old_area_id" style="width:300px" @on-change="findSubordinateList('3',formItem.old_area_id)">
              <Option v-for="(areaListitem,areaListindex) in areaList" :key="areaListindex" :value="areaListitem.id">
                {{ areaListitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="目标区">
            <Select v-model="formItem.new_area_id" style="width:300px" @on-change="findSubordinateListNew('3',formItem.new_area_id)">
              <Option v-for="(areaListNewitem,areaListNewindex) in areaListNew" :key="areaListNewindex" :value="areaListNewitem.id">
                {{ areaListNewitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="当前街道">
            <Select v-model="formItem.old_street_id" style="width:300px" @on-change="findSubordinateList('4',formItem.old_street_id)">
              <Option v-for="(streetListitem,streetListindex) in streetList" :key="streetListindex" :value="streetListitem.id">
                {{ streetListitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="目标街道">
            <Select v-model="formItem.new_street_id" style="width:300px" @on-change="findSubordinateListNew('4',formItem.new_street_id)">
              <Option v-for="(streetListNewitem,streetListNewindex) in streetListNew" :key="streetListNewindex" :value="streetListNewitem.id">
                {{ streetListNewitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="当前社区">
            <Select v-model="formItem.old_community_id" style="width:300px" @on-change="findSubordinateList('5',formItem.old_community_id)">
              <Option v-for="(communityListitem,communityListindex) in communityList" :key="communityListindex" :value="communityListitem.id">
                {{ communityListitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="目标社区">
            <Select v-model="formItem.new_community_id" style="width:300px" @on-change="findSubordinateListNew('5',formItem.new_community_id)">
              <Option v-for="(communityListNewitem,communityListNewindex) in communityListNew" :key="communityListNewindex" :value="communityListNewitem.id">
                {{ communityListNewitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="当前网格">
            <Select v-model="formItem.old_garden_id" style="width:300px" @on-change="findSubordinateList('6',formItem.old_garden_id)">
              <Option v-for="(gradenListitem,gradenListindex) in gradenList" :key="gradenListindex" :value="gradenListitem.id">
                {{ gradenListitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="目标网格" v-if="formItem.transfer_type === '1'">
            <Select v-model="formItem.new_garden_id" style="width:300px">
              <Option v-for="(gradenListNewitem,gradenListNewindex) in gradenListNew" :key="gradenListNewindex" :value="gradenListNewitem.id">
                {{ gradenListNewitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="当前楼" v-if="formItem.transfer_type === '1'">
            <Select v-model="formItem.old_building_id" style="width:300px">
              <Option v-for="(buildingListitem,buildingListindex) in buildingList" :key="buildingListindex" :value="buildingListitem.id">
                {{ buildingListitem.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Modal>
  <Modal
    width="1200"
    v-model="transferDetailModal"
    title="迁移详情">
    <div style="text-align: center">
      <Row class="rowCLass">
        <Col span="24">迁移类型：
          <Select v-model="detailInfo.transfer_type" style="width:200px;text-align: left" disabled>
            <Option value="0">网格</Option>
            <Option value="1">楼</Option>
          </Select>
        </Col>
      </Row>
      <Row class="rowCLass">
        <Col span="24">迁移主体：
          <Input v-model="detailInfo.transfer_name" style="width: 200px" disabled/>
        </Col>
      </Row>
      <Row class="rowCLass">
        <Col span="12">迁移前：
          <Input v-model="detailInfo.old_area_name" style="width: 200px" disabled/>
        </Col>
        <Col span="12">迁移后：
          <Input v-model="detailInfo.new_area_name" style="width: 200px" disabled/>
        </Col>
      </Row>
      <Row class="rowCLass">
        <Col span="12">迁移前：
          <Input v-model="detailInfo.old_street_name" style="width: 200px" disabled/>
        </Col>
        <Col span="12">迁移后：
          <Input v-model="detailInfo.new_street_name" style="width: 200px" disabled/>
        </Col>
      </Row>
      <Row class="rowCLass">
        <Col span="12">迁移前：
          <Input v-model="detailInfo.old_community_name" style="width: 200px" disabled/>
        </Col>
        <Col span="12">迁移后：
          <Input v-model="detailInfo.new_community_name" style="width: 200px" disabled/>
        </Col>
      </Row>
      <Row class="rowCLass" v-if="detailInfo.transfer_type === '1'">
        <Col span="12">迁移前：
          <Input v-model="detailInfo.old_garden_name" style="width: 200px" disabled/>
        </Col>
        <Col span="12">迁移后：
          <Input v-model="detailInfo.new_garden_name" style="width: 200px" disabled/>
        </Col>
      </Row>
    </div>
  </Modal>
</div>
</template>

<script>
import {
  findSubordinateList,
  findTransferList,
  updateTransferExamineType,
  updateTransferGrid
} from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      transferModal: false,
      columns: [
        {
          title: '迁移编码',
          key: 'examine_code',
          align: 'center'
        },
        {
          title: '迁移类型',
          slot: 'transfer_type',
          align: 'center'
        },
        {
          title: '迁移主体',
          key: 'transfer_name',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data: [],
      severUserInfo: {},
      formItem: {},
      areaList: [],
      streetList: [],
      communityList: [],
      gradenList: [],
      buildingList: [],
      areaListNew: [],
      streetListNew: [],
      communityListNew: [],
      gradenListNew: [],
      transferDetailModal: false,
      detailInfo: {},
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    init () {
      let data = this.params
      findTransferList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.data = ret.data.data.results
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    findSubordinateList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '2') {
            this.areaList = ret.data.data
          }
          if (e1 === '3') {
            this.streetList = ret.data.data
          }
          if (e1 === '4') {
            this.communityList = ret.data.data
          }
          if (e1 === '5') {
            this.gradenList = ret.data.data
          }
          if (e1 === '6') {
            this.buildingList = ret.data.data
          }
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    findSubordinateListNew (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '2') {
            this.areaListNew = ret.data.data
          }
          if (e1 === '3') {
            this.streetListNew = ret.data.data
          }
          if (e1 === '4') {
            this.communityListNew = ret.data.data
          }
          if (e1 === '5') {
            this.gradenListNew = ret.data.data
          }
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    transferConfirm () {
      let data = {
        transfer_type: this.formItem.transfer_type,
        old_area_id: this.formItem.old_area_id,
        new_area_id: this.formItem.new_area_id,
        old_street_id: this.formItem.old_street_id,
        new_street_id: this.formItem.new_street_id,
        old_community_id: this.formItem.old_community_id,
        new_community_id: this.formItem.new_community_id
      }
      if (data.transfer_type === '0') {
        data.transfer_id = this.formItem.old_garden_id
      }
      if (data.transfer_type === '1') {
        data.old_garden_id = this.formItem.old_garden_id
        data.new_garden_id = this.formItem.new_garden_id
        data.transfer_id = this.formItem.old_building_id
      }
      console.log(data)
      updateTransferGrid(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '迁移申请成功！等待审核' })
          this.init()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    clickDetail (e) {
      this.detailInfo = e
      this.transferDetailModal = true
    },
    pageAction (e) {
      this.params.pageNo = e
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    updateTransferExamineType (e) {
      let data = {
        examine_code: e.examine_code
      }
      updateTransferExamineType(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '审批成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '审批失败！', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.findSubordinateList('2', '999999999')
    this.findSubordinateListNew('2', '999999999')
  }
}
</script>

<style scoped>
.rowCLass{
  margin-bottom: 20px;
}
</style>
